<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:>
<head>
    <th:block th:include="include :: header('购物车')" />

</head>
<script th:src="@{js/cart.js}"></script>
<body>
<th:block th:include="include :: top" />
<header class="product">
    <a href="./" class="logo">
        <img src="img/logo2.png">
    </a>
    <div class="search">
        <form action="search" >
            <input type="text" placeholder="搜索 ${website_name} 商品/品牌/店铺" name="keyword">
            <button class="search-button" type="submit">搜索</button>
        </form>
        <ul class="search-below">
            <a >
<!--                <li><a href="category?id=${c.id}" th:text="${c.name}"></a></li>-->
            </a>
        </ul>

    </div>

</header>
<main  class="cart" >
    <form action = "buy">
        <div class="sum-top">
            <div class="pull-right">
                <span>已选商品（不含运费）</span>
                <span class="yen-small">￥</span>
                <span class="cart-sum-price-small cart-sum-price">0.00</span>
                <button class="crate-order-small crate-order">结 算</button>
            </div>
        </div>

        <table class="cart-list" >

            <thead>
            <tr>
                <th class="select-and-image">
                    <img src="img/noselect.png" class="select-img select-all" select="false">
                    <span>全选</span>
                </th>
                <th class="item-info">
                    商品信息
                </th>
                <th class="price-per">
                    单价
                </th>
                <th class="item-num">
                    数量
                </th>
                <th class="item-price">
                    金额
                </th>
                <th class="operation">
                    操作
                </th>
            </tr>
            </thead>
            <tbody>
                <tr  th:each="cartList,cartState:${cartList}" th:attr="select=false,stock=${cartList.product.stock},buy=${cartList.number},price-per=${cartList.product.Price},ciid=${cartList.id}">
                    <input type="hidden" name="ciid" th:value="${cartList.id}">
                    <td class="buy-item-image">
                        <img src="img/noselect.png" class="select-img">
                        <img src="img/香香.jpg"  class="cart-item-jpg">
                    </td>
                    <td class="buy-item-name">
                        <a th:href="@{/product(cartList.pid}" th:text="${cartList.product.name}"></a>
                        <div class="cart-item-title-bottom">
                            <img title="支持信用卡支付" src="img/creditcard.png">
                            <img title="消费者保障服务,承诺7天退货" src="img/7day.png">
                            <img title="消费者保障服务,承诺如实描述" src="img/promise.png">
                        </div>
                    </td>
                    <td class="buy-item-price">
                        <span class="cart-item-old-price">￥<span th:text="${cartList.product.Price}"></span></span>
                        <span class="cart-item-now-price">￥<span th:text="${cartList.product.Price}"></span></span>
                    </td>
                    <td>
                        <div class="cart-change">
                            <a href="javascript:void(0);" class="cart-decrease cart-change-button">-</a><input type="text" th:value="${cartList.number}" class="item-num-input"><a href="javascript:void(0);" class="cart-increase cart-change-button" th:attr="ciid=${cartList.id},num=${cartList.number}">+</a>
                        </div>
                    </td>
                    <td class="buy-item-sum">
                        <span class="cart-item-sum">￥<span th:text="${cartList.sum}"></span></span>
                    </td>
                    <td class="operation">
                        <a href="javascript:void(0);" class="delete-button" th:attr="ciid=${cartList.id}" >删除</a>
                    </td>
                </tr>
            </tbody>
        </table>


        <div class="sum-bottom  clear">
            <img src="img/noselect.png" class="select-img select-all" select="false">
            <span>全选</span>
            <div class="pull-right">
            <span>
                已选商品
                <span class="cart-num">0</span>
                件
            </span>
                <span class="sum-text">合计（不含运费）</span>
                <span class="yen-big">￥</span>
                <span class="cart-sum-price cart-sum-price-big">0.00</span>
                <button class="crate-order-big crate-order" type="submit">结 算</button>
            </div>
        </div>
    </form>

    <div class="modal" tabindex="-1" role="dialog" id="confirmModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-title">删除宝贝</div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                <div class="confirm-content">确认要删除该宝贝吗？</div>
                <div class="button-group">
                    <button class="yes" id="confirmDelete">确定</button>
                    <button class="no" id="cancelDelete">取消</button>
                </div>
            </div>
        </div>
    </div>
</main>

<th:block th:include="include :: footer" />
</body>
</html>